<template>
  <div style="height: 100%">
<!--    <vxe-modal v-model="showDialog" title="预约挂号" width="60%" :loading="submitLoading"   destroy-on-close>
    </vxe-modal>-->
      <el-row  :gutter="20">
        <el-col   :span="6" style="border-right-style: dotted">
         <div >
           <h3>选择患者</h3>
           <el-row>
             <el-button style="width: 95%" @click="addDialog = true" icon="el-icon-plus" size="small"
                        type="primary">新增患者
             </el-button>
           </el-row>
           <el-row>
             <el-input placeholder="患者姓名" v-model="filterText"/>
           </el-row>
           <el-row>
             <el-tree class="tree" v-loading="treeLoading" :data="patientList" node-key="id"
                      :filter-node-method="filterTreeNode" element-loading-text="拼命加载中" highlight-current
                      ref="tree" @node-click="selectPatientChange">
               <template v-slot:default="{ node, data }">
                 <span class="custom-tree-node">{{ data.name }}<span v-if="data.mobile" style="margin-left:5px;font-size: 10px;color: #8c939d">({{ data.mobile}})</span></span>
               </template>
             </el-tree>
           </el-row>
         </div>
        </el-col>
        <el-col  :span="6" style="border-right-style: dotted">
          <div>
            <h3>选择医生</h3>
            <el-row>
              <el-date-picker style="width: 98%" @change="showDoctorList" v-model="submitData.doctorDate" :picker-options="pickerOptions" value-format="yyyy-MM-dd" type="date" placeholder="选择预约日期"></el-date-picker>
            </el-row>
            <el-row>
              <el-select ref="selectClassKindRef" v-model="classKindBean" value-key="id" @change="selectClassKind">
                <el-option
                    ref="elOptionRefClassKind"
                    v-for="(item,index) in classKindList"
                    :value="item"
                    :label="item.className+`(${item.startTime}-${item.endTime})`"
                    :key="item.id"
                >
                </el-option>
              </el-select>
            </el-row>
            <el-row>
              <el-select ref="selectWareRef" v-model="wareBean" value-key="id" @change="selectWare">
                <el-option
                    ref="elOptionRefWare"
                    v-for="(item,index) in wareList"
                    :value="item"
                    :label="item.name"
                    :key="item.code"
                >
                </el-option>
              </el-select>
            </el-row>
<!--            <div>-->
<!--              <span>总挂号数：</span><span >{{ totalNumber }}</span>-->
<!--            </div>-->
<!--            <div>-->
<!--              <span >已预约数：</span><span>{{ registeredNum }}</span>-->
<!--            </div>-->

            <el-menu  class="el-menu-vertical-demo" style="background-color: #ffffff;" @select="selectDoctorEvent">
              <el-menu-item :index="index" v-for="(item,index) in doctorList" :key="index" >
                <!--              <el-tag effect="dark" :color="item.color">{{ item.className}}</el-tag>-->
                <span style="font-size: 15px">{{ item.personName }}</span><span style="margin-left: 10px;font-size: 10px">(限号：{{ item.limitCount }})</span>
              </el-menu-item>

            </el-menu>

          </div>
        </el-col>
        <el-col :span="12" >
          <vxe-form :data="submitData" :rules="formRules" title-align="right" title-width="100" @submit="submitGuaHao">
            <vxe-form-item title="患者信息" class="setting-title" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
            <vxe-form-item title="姓名:" field="personName" title-align="left" span="12" >
               {{ submitData.personName }}
            </vxe-form-item>
            <vxe-form-item title="性别:" field="sex" title-align="left" span="12" >
              <span v-if="submitData.sex&&submitData.sex.toString()==='1'">男</span><span v-else>女</span>
            </vxe-form-item>
            <vxe-form-item title="联系方式" title-align="left"  field="contactWay" span="24" >
               <el-input v-model="submitData.contactWay"></el-input>
            </vxe-form-item>
            <vxe-form-item title="医生信息" class="setting-title" span="24" title-align="left" title-width="200px" :title-prefix="{message: '请填写必填项', icon: 'fa fa-info-circle'}"></vxe-form-item>
            <vxe-form-item title="科室:" title-align="left"  field="wareName" span="12" >
              {{  submitData.wareName }}
            </vxe-form-item>
            <vxe-form-item title="预约医生:" title-align="left"  field="doctorName" span="12" >
               {{  submitData.doctorName}}
            </vxe-form-item>
            <vxe-form-item title="就诊时间:" title-align="left"  field="doctorDate" span="24" >
              <span>{{  submitData.doctorDate}}</span><span style="margin-left: 20px">{{submitData.className}}</span>
            </vxe-form-item>

            <vxe-form-item title="其他信息" class="setting-title" span="24" title-align="left" title-width="200px" :title-prefix="{message: '请填写必填项', icon: 'fa fa-info-circle'}"></vxe-form-item>
            <vxe-form-item title="备注" title-align="left" span="20" >
              <el-input v-model="submitData.remake" type="textarea" :rows="4"></el-input>
            </vxe-form-item>
            <vxe-form-item align="center" span="24"  >
              <vxe-button type="submit" content="提交"  status="primary" ></vxe-button>
              <vxe-button   v-if="this.row.id" content="取消预约"  status="primary" ></vxe-button>
            </vxe-form-item>

          </vxe-form>

        </el-col>
      </el-row>

    <el-dialog :visible.sync="addDialog" :title="title" append-to-body width="550px">
      <el-form ref="addForm" :model="form" :rules="rules" size="small" label-width="78px">
        <el-form-item label="姓名" prop="patientName" >
          <el-input v-model="form.patientName" style="width: 420px;" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" style="width: 420px;" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="form.sex" label="1">男</el-radio>
          <el-radio v-model="form.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday">
          <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="form.birthday"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" style="width: 420px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="()=> addDialog = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
// import { getRegistereds, takeRegistered } from '@/api/registered'
// import { getOrgTreeByType } from '@/api/orgnazition'
// import { getOrgUsersByType } from '@/api/user'
// import { getDictonarySelect } from '@/api/dictionary'
import { formatDate } from '@/util/date'
import XEUtils from 'xe-utils'
export default {
  name: 'TakeOppointment',
  components: {

  },
  props:{
    row:{
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      submitData:{
        wareId: '',
        wareName: '',
        personId: '',
        personName: '',
        contactWay: '',
        classId: '',
        className: '',
        remark: '',
        doctorId: '',
        doctorName: '',
        doctorDate:  XEUtils.toDateString(new Date(),'yyyy-MM-dd')
      },
      formRules:{
        personName: [
          { required: true, message: '请选择患者' },
        ],
        wareName: [
          { required: true, message: '请选择科室' }
        ],
        doctorDate: [
          { required: true, message: '请选择就诊日期' }
        ]
      },
      submitLoading: false,
      showDialog: true,
      isShowPaitentDialog: false,
      addButtonDisabled: true,
      wareBean: {},
      classKindBean: {},
      addsubmitData:{},
      patient: {
      },
      totalNumber: 0,
      registeredNum: 0,
      wareList: [],
      doctorList: [],
      classKindList: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime()< Date.now()-24*60*60*1000;
        },
      },
      //患者信息
      filterText: '',
      queryParam: '',
      treeLoading: false,
      addDialog: false,
      title: '',
      form:{
        patientName: "",
        sex: "",
        birthday: "",
        mobile: ""
      },
      currentRow: {},
      currentIndex: -1,
      rules: {
        patientName:[
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ]
      },
      patientList: []

    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  created () {

  },
  mounted () {
    if(Object.keys(this.row).length>0){
      this.submitData = this.row
    }

    this.$api.getWareList().then(res => {
      this.wareList = res

    })

    this.$api.fetchClassKindList({
      current: 1,
      size: 999
    }).then(res=>{
      this.classKindList = res.data.data.records
      if(this.classKindList.length>0){
        this.classKindBean = this.classKindList[0]
      }
    })
    this.$api.getPatientList().then(res=>{
      this.patientList = res.data.data

    })


  },

  methods: {
    submit(){

    },
    selectPatientInfo (row) {
      this.patient = row
    },
    selectPatient () {
      this.isShowPaitentDialog = true
    },
      selectClassKind(value){
        this.showDoctorList()
      },
      selectWare (value) {
          this.submitData.wareId = this.wareBean.id
          this.submitData.wareName = this.wareBean.name
          this.showDoctorList()
     },
     showDoctorList(){
       if(this.submitData.doctorDate.length>0&&this.wareBean&&this.classKindBean&&Object.keys(this.wareBean).length>0){
         this.$api.getScheduleForDoctorList({
           dutyDate: this.submitData.doctorDate,
           wareId: this.wareBean.id,
           classId: this.classKindBean.id
         }).then(res => {
           this.doctorList = res.data.data
           this.selectDoctor={}
         })
       }else {
         this.selectDoctor={}
       }
     },
    selectDoctorEvent(index,path){
      console.log(index)
      this.submitData.doctorName = this.doctorList[index].personName
      this.submitData.doctorId = this.doctorList[index].personId
    },
    //患者选择界面
    filterTreeNode(){

    },
    selectPatientChange (data, node) {
      console.log('患者信息=>',data)
      // console.log( this.$refs.elOptionRef)
      this.submitData.personName = data.name
      this.submitData.contactWay = data.mobile
      this.submitData.personSex = data.sex
      this.submitData.personId = data.id
    },
    comfirm () {
      this.$emit('selectionChange', this.currentRow)
      this.dialogTableVisible = false
    },
    queryPatientData(){
      this.$http('/pds-ui/pds/patients',{       // 还可以直接把参数拼接在url后边
        params:{
          patientName:this.queryParam
        }
      }).then((res)=>{
        this.patientList = res.data.data.records;
      }).catch(function (error) {
        console.log(error);
      });
    },
    handleEdit(index, row){
      this.addDialog = true
      this.currentIndex = index
      this.title = '编辑患者信息'
      this.form = {...row}
    },
    doSubmit(){
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          console.log(this.form)
          if('编辑患者信息' === this.title){
            console.log('currentIndex',this.currentIndex)
            this.patientList.splice(this.currentIndex,1,this.form)
            this.addDialog = false
            return
          }
          let newData = Object.assign(this.form)
          this.patientList.push(newData)
          this.$emit('selectionChange', newData)
          this.addDialog = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    submitGuaHao(){
      // let msg = ''
      // if(Object.keys(this.patient).length===0){
      //     msg+='请选择患者!'
      // }
      // if(Object.keys(this.wareBean).length===0){
      //     msg+= '请选择科室!'
      // }
      // if(Object.keys(this.classKindBean).length ===0){
      //   msg+= '请选择班次'
      // }
      // if(this.doctorDate.length ===0){
      //    msg+= '请选择挂号日期'
      // }
      // if(msg.leng>0){
      //   this.$message.warning(msg)
      //   return
      // }
      this.submitLoading = true
      this.$api.saveGuahao(this.submitData)
              .then(res=>{
                if(this.submitData.id){
                  this.$message.success('挂号成功！')
                }else{
                  this.$message.success('挂号成功！')
                }
                this.$emit('close',1)

              }).finally(()=>{
         this.submitLoading = false

      })

    }
  }
}
</script>


<style lang="scss" scoped>
  .el-row {
    margin-bottom: 10px;
    &:last-child {
     margin-bottom: 0;
    }
   }
  .custom-tree-node {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #333333;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    display: inline-block;
  }

  .setting-title{
    font-size: 16px;
    font-weight: 700;
    color: #3a8ee6;
  }


</style>

